import Notify from '@/components/prompt/prompt.js'
export default {
  install(Vue) {
    Vue.directive('focus', {
      inserted(el) {
        el.focus();
      }
    })

    Vue.directive('phone-check', {
      inserted(el, binding) {
        const triggerType = binding.arg || 'blur'; // 默认失焦触发
        const validateCallback = typeof binding.value === 'function' ? binding.value : null;

        // 1. 先定义 validate 函数（事件处理函数，内部调用 phoneValidate）
        const validate = () => {
          // 解析配置项
          const options = typeof binding.value === 'object' ? binding.value : {};
          const { showNotify = true, allowEmpty = false } = options;

          // 👉 这里终于会调用 phoneValidate 了！
          const isValid = phoneValidate(el, { showNotify, allowEmpty });

          // 传递校验结果给组件
          if (validateCallback) {
            validateCallback(isValid);
          }
        };

        // 2. 关键修复：把事件绑定移到这里（inserted 顶层）
        // 初始时就绑定事件，不需要等 validate 执行
        if (triggerType.includes('blur')) {
          el.addEventListener('blur', validate); // 失焦触发 validate
        }
        if (triggerType.includes('click')) {
          el.addEventListener('click', validate); // 点击触发 validate
        }

        // 3. 存储事件引用，供 unbind 移除（避免内存泄漏）
        el._phoneCheckEvents = { validate, triggerType };
      },

      unbind(el) {
        // 移除事件（逻辑不变）
        const { validate, triggerType } = el._phoneCheckEvents || {};
        if (triggerType?.includes('blur')) {
          el.removeEventListener('blur', validate);
        }
        if (triggerType?.includes('click')) {
          el.removeEventListener('click', validate);
        }
      }
    })

    // 校验函数（逻辑不变，现在会被 validate 调用）
    function phoneValidate(el, options = {}) {
      const { showNotify = true, allowEmpty = false } = options;
      const phone = el.value?.trim();

      if (!phone) {
        return allowEmpty;
      }

      const phoneReg = /^1[3456789]\d{9}$/;
      const isValid = phoneReg.test(phone);

      if (!isValid && showNotify) {
        Notify({
          message: '请输入正确的手机号',
          type: 'danger'
        });
        // 清空输入框内容
        el.value = '';
        // 触发 input 事件，通知组件输入内容已改变
        el.dispatchEvent(new Event('input'));
      }

      return isValid;
    }
  },
};